<template>
  <div>
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item prop="title" label="标题">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="remarks" label="内容">
            <editor ref="editorRef" :value="form.remarks" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialong__button--wrap">
      <el-button @click="close">取消</el-button>
      <el-button :loading="subLoading" type="primary" @click="setListData">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, PropType, ref, unref } from 'vue'
import { InfoWriteParams } from './types'
import { getDetApi, setApi } from '../api'
import { Message } from '_c/Message'
import Editor from '_c/Editor/index.vue'
const fromSchema: any[] = [
  {
    field: 'title',
    label: '标题',
    span: 24
  }
]

export default defineComponent({
  name: 'Detail',
  components: {
    Editor
  },
  props: {
    info: {
      type: Object as PropType<any>,
      default: () => null
    }
  },
  emits: ['close', 'success'],
  setup(props, { emit }) {
    const form = reactive<InfoWriteParams>({
      id: '', // id
      subjectId: 0, // 课程所示栏目
      title: '', // 长标题
      shortTitle: '', // 短标题
      price: 0, // 价格
      lessonNum: 0, // 课时
      courseDesc: '', // 课程描述
      courseType: 0, // 课程类型
      difficulty: 0, // 课程难度
      remarks: '' // 课程详情
    })
    const formRef = ref<HTMLElement | null>(null)
    const editorRef = ref<HTMLElement | null>(null)
    const subLoading = ref<boolean>(false)
    async function getDet() {
      if (props.info) {
        const id = (props.info as any).id
        try {
          const res = await getDetApi({
            params: {
              id: id
            }
          })
          if (res.code === 0) {
            for (const key in form) {
              if (key === 'importance') {
                form[key] = res.data[key].toString()
              } else {
                form[key] = res.data[key]
              }
            }
          }
        } catch (e) {
          console.log(e)
        }
      }
    }
    getDet()

    // 新增或者编辑
    function setListData() {
      const formRefWrap = unref(formRef as any)
      const editorRefWrap = unref(editorRef as any)
      form.remarks = editorRefWrap.getHtml()
      try {
        subLoading.value = true
        formRefWrap.validate(async(valid: boolean) => {
          if (valid) {
            const formData = unref(form)
            const res = await setApi({
              data: formData
            })
            if (res) {
              Message.success(form.id ? '编辑成功' : '新增成功')
              emit('success', form.id ? 'edit' : 'add')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } catch (err) {
        console.log(err)
      } finally {
        subLoading.value = false
      }
    }

    function close() {
      emit('close')
    }

    return {
      formRef, editorRef,
      form,
      fromSchema,
      close,
      subLoading,
      setListData
    }
  }
})
</script>

<style>
</style>
